<template>
  <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="`打款详情`" :autoBack="true"
    leftIconColor="$uni-text-color" :bgColor="'rgba(0,0,0,0)'" :titleStyle="{ color: '#fff', fontSize: '32rpx' }">

    <view class="container"
      :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/staff_project_arrange.png)`, paddingTop: (safeAreaInsets?.top + 44) + 'px' }">

      <!-- 表单盒子 -->
      <view class="form_box area">
        <scroll-view scroll-y class="comprehensive" :style="page ==  'approval' && level == userInfo.id && recyclestate== 0 || recyclestate== 3 ? 'height:73vh' : 'height:82vh'"
          v-if="list">
          <view class="recruit_wrap">
            <view class="header">
              <up-avatar :src="`${baseUrl}` + list.user.avatar" shape="circle" size="60"></up-avatar>
              <view class="header_cont">
                <view class="title">{{ list.user.nickname }}提交的申请</view>
                <view class="times">{{ formatDatetime(list.createtime) }}<text class="hint">提交</text></view>
              </view>
            </view>
            <view class="Payroll_detail">
              <view class="title">项目详情</view>
              <view class="item">
                <view class="item_name">
                  <view class="name_title nowrap">{{ list.schedule.title }}</view>
                </view>
              
                <view class="item_pub">
                  <image :src="`${baseUrl}/uploads/uniapp_image/staff/Myinvite_icon_time.png`" mode="scaleToFill" />
                  <view class="gray">{{list.schedule.date}} （{{ list.schedule.start_time}} ~ {{ list.schedule.end_time }}）</view>
                </view>
                <view class="add_background">
                  <view class="item_pub">
                    <view class="nowrap">地址：{{ list.schedule.address }}</view>
                  </view>
                  <view class="item_pub add_item_pub">
                    <view class="item_pub_left">
                    
                      <view>人数：</view>
                      <view class="text">
                        <text class="blue">{{list.schedule.man_apply_total }}</text>/
                        <text class="gary">{{list.schedule.man_num }}</text>
                        <text class="sex">(男)</text>
                      </view>
                    </view>
                    <view class="item_pub_right">
                      <view class="text">
                        <text class="orange">{{list.schedule.woman_apply_total }}</text>/
                        <text class="gary">{{ list.schedule.woman_num }}</text>
                        <text class="sex">(女)</text>
                      </view>
                    </view>
                  </view>
                  <view class="item_pub add_item_pub">
                    <view class="item_pub_left">
                    
                      <view>薪资：</view>
                      <view class="text">
                        <text class="blue">￥{{ list.schedule.man_salary }}</text>   <text class="sex">(男)</text>
                      </view>
                    </view>
                    <view class="item_pub_right">
                      <view class="text">
                        <text class="orange">￥{{ list.schedule.woman_salary }}</text><text class="sex">(女)</text>
                      </view>
                    </view>
                  </view>
                  <view class="item_pub add_item_pub">
                    <view class="item_pub_left">
                    
                      <view>代理商金额：</view>
                      <view class="text">
                        <text class="blue">￥{{ list.schedule.agent_man_salary }}</text>   <text class="sex">(男)</text>
                      </view>
                    </view>
                    <view class="item_pub_right">
                      <view class="text">
                        <text class="orange">￥{{ list.schedule.agent_woman_salary }}</text><text class="sex">(女)</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="detial_list">
              <!-- <view class="title">打款信息</view> -->
              <view class="item">
                <view class="titles">打款时间：</view>
                <view class="list_right">{{ formatDatetime(list.createtime) }}</view>
              </view>
              <view class="item">
                <view class="titles">预计打款金额：</view>
                <view class="list_right">{{ list.money }}</view>
              </view>
              <view class="item">
                <view class="titles">打款状态：</view>
                <view class="list_right">
                  <text 
                    :class="
                    list?.status == 0 ? 'blue_status' :
                    list?.status == 1 ? 'green_status' :
                    list?.status == 2 ? 'red_status' :
                    list?.status == 3 ? 'yellow_status' :
                    ''"
                  >
                    {{ 
                      list?.status == 0 ? '待转账' :
                      list?.status == 1 ? '全部成功' :
                      list?.status == 2 ? '全部失败' :
                      list?.status == 3 ? '部分成功' :
                      ''
                    }}
                  </text>
                </view>
              </view>
              <view class="item item_special">
                <view class="titles">打款理由：</view>
                <view class="item_special_cont">{{ list.memo }}</view>
              </view>
            </view>
        
            <view class="Payroll_detail">
              <view class="title">发薪明细</view>
              <fui-overflow-hidden  :size="28" color="#FF2B2B" type="2" gradientColor="#FFFFFF"
              height="200rpx" :visible="openlist.visible">
              <view class="Payroll_content" >
                <view class="Payroll_list"  v-for="(i,index) in payroll_detail_list" :key="index">
                  <view class="Payroll_name">
                    <view class="left">
                      <image :src="`${baseUrl}/uploads/uniapp_image/user/bancidetails_icons_zhizhao.png`" mode="scaleToFill"
                          v-if="i.source == 1" />
                      <image v-else :src="`${baseUrl}/uploads/uniapp_image/user/bancidetails_icons_dailiren.png`"
                        mode="scaleToFill" />
                      <view class="titlename">{{ i.title }}</view>
                    </view>
                    <view class="right"  v-if="i.source == 2" >代理商分佣：￥{{ i.agent_commission }}</view>
                  </view>
                  <view class="list_item" v-for="(item,index) in i.list " :key="index">
                    <view class="list_item_box">
                      <view class="list_item_left">
                        <view class="list_item_name">{{ item.user.nickname }}</view>
                        <view class="list_item_time">工时{{ item.man_hour }}小时</view>
                      </view>
                      <view class="dis_box">
                        <view class="list_item_right">￥{{ item.money }}</view>
                        <view :class="
                          item.status == 0 ? 'blue' :
                          item.status == 1 ? 'green' :
                          item.status == 2 ? 'red' :
                          item.status == 3 ? 'yellow' :
                          ''">
                          {{ 
                            item.status == 0 ? '待转账' :
                            item.status == 1 ? '已转账' :
                            item.status == 2 ? '失败' :
                            item.status == 3 ? '部分成功' :
                            ''
                          }}
                        </view>
                      </view>
                    </view>
                    


                    <view class="fail_remark" v-if="item.status == 2">
                      <view class="memo red">{{ item.fail_reason }}</view>
                    </view>


                  </view>
                </view>               
              </view>
            
            </fui-overflow-hidden>
            <view class="open" @click="readMore">{{ openlist.title }}<fui-icon :name="openlist.icon" color="#333"
              size="24"></fui-icon></view> 

            </view>
            <!-- 流程图  当员工时候不显示，审核人是老板时候显示-->
            <s-review-state :stepList="stepList" :dates="dates"></s-review-state>
          </view>

        </scroll-view>
      </view>

    </view>
    <view class="placeholder"></view>
  </s-layout>
  <!-- 拒绝理由 -->
  <s-reasons-comfirm :show="showRefuse" @cancel="reasonsCancel" @affirm="reasonsConfirm"></s-reasons-comfirm>
  <!-- 底部提交按钮 -->
    <!--  -->
  <view v-if="page ==  'approval' ">
    <view v-if="level == userInfo.id">
      <view class="edit_button" v-if="recyclestate == 0 || recyclestate== 3">
        <button class="del" @tap="redict_origin_order" v-if="list.origin_id != 0">原订单</button>
        <button class="del" @tap="refuse(list.id)">拒绝</button>
        <button class="edit" @tap="submit(list.id)">同意</button>
      </view>
    </view>
  </view>
    
  <view v-if="(list?.status == 2 || list?.status == 3)">
    <view v-if="list.user_id == userInfo.id">
      <view v-if="list.reissue_id != 0">
        <view class="pageBtn">
          <view class="again_remit_button" @tap="redict_again_remit">补发进度</view>
        </view>
      </view>
      <view v-else>
        <view class="pageBtn">
          <view class="again_remit_button" @tap="show_again_remit_dialog">补发工资</view>
        </view>
      </view>
    </view>
  </view>
  <fui-dialog :show="again_remit_dialog" :content="dialog_content" maskClosable @click="again_remit" @close="dialog_close"></fui-dialog>

</template>

<script setup>
import sheep from '@/sheep';
import { ref, reactive, unref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { baseUrl } from "@/sheep/config";
import { formatDatetime } from '@/utils/fn.js';
import { isEmpty } from 'lodash';

const { safeAreaInsets } = uni.getSystemInfoSync();
const userInfo = sheep.$store('user').userInfo;
const is_template = ref(0)
const text = ref("提交");
const editid = ref('')
const recyclestate = ref()
const level =  ref()
const page = ref()
onLoad((options) => {
  editid.value = options.ids
  page.value = options.page
  is_template.value = options.is_template
  if (!isEmpty(options.is_template)) {
    is_template.value = 1
  }
  getPolicyreportView()
})
//展开列表
const openlist = ref({
  title: '展开列表',
  icon: 'turningdown',
  visible: false,
  openshow: false,
})
 const readMore = ()=> {
			if ( openlist.value.visible) {
        openlist.value.visible = false
        openlist.value.title= '展开列表'
         openlist.value.icon = 'turningdown'
    
			} else {
        openlist.value.visible = true
            openlist.value.icon = 'turningup'
        openlist.value.title = '收起列表'
			}
}


const stepList = ref([])
//请求数据
const list = ref()
const dates = ref(-1)
const payroll_detail_list =  ref([])
const getPolicyreportView = async () => {
  let params = {
    ids: editid.value,
    with: 'user,schedule'
  }
  const res = await sheep.$api.project.getRemitApproveView(params)
  list.value = res?.data
  level.value = res.data.level
  recyclestate.value = res.data.state
  payroll_detail_list.value = res?.data.user_list
  stepList.value = res?.data.approval_process
  stepList.value.forEach((i) => {
    if (i.datetime) {
      dates.value++
    }
  })

}
//同意
const submit = async (e) => {
  uni.$u.throttle(() => {
    // #ifdef MP
    sheep.$platform.useProvider('wechat').subscribeMessage('apply_notice');
    // #endif
    let params = {
      ids: e,
      state: '3'
    }
    sheep.$api.project.getRemitApprovePass(params).then((res) => {
      if (res.code == 1) {
        sheep.$helper.toast(res.msg)
        setTimeout(function () {
          stepList.value = []
      list.value =''
      dates.value = -1
      getPolicyreportView()
      if(is_template.value != 1) {
        sheep.$router.renewal()
      }
        }, 1000);
      }
    });
  }, 1000);
};


// 拒绝
const showRefuse = ref(false)
const reasonsValue = ref()
const reasonsId = ref()
const refuse = (e) => {
  showRefuse.value = true
  reasonsId.value = e
}
//拒绝理由 确定 -->
const reasonsConfirm = (e) => {
  uni.$u.throttle(() => {
    // #ifdef MP
    sheep.$platform.useProvider('wechat').subscribeMessage('apply_result_notice');
    // #endif
    reasonsValue.value = e
    if (!reasonsValue.value) {
      sheep.$helper.toast('请输入拒绝理由');
      return;
    } else {
      let params = {
        ids: reasonsId.value,
        reasons: reasonsValue.value
      }
      sheep.$api.project.getRemitApproveRefuse(params).then((res) => {
        if (res.code == 1) {
          sheep.$helper.toast(res.msg)
          setTimeout(function () {
            stepList.value = []
            list.value =''
            dates.value = -1
            getPolicyreportView()
            showRefuse.value = false
            if(is_template.value != 1) {
              sheep.$router.renewal()
            }
          }, 1000);
          reasonsValue.value = ''

        }
      });
    }
  }, 1000);
}
const redict_again_remit = (e) => {
  uni.$u.throttle(() => {
    sheep.$router.go('/subpackage/staff/workbench/remittance/remittance_details', {
      ids: list.value.reissue_id,
      page:'apply'
    });
  }, 1000);
}
const redict_origin_order = (e) => {
  uni.$u.throttle(() => {
    sheep.$router.go('/subpackage/staff/workbench/remittance/remittance_details', {
      ids: list.value.origin_id,
      page:'approval'
    });
  }, 1000);
}


// 拒绝理由取消
const reasonsCancel = (e) => {
  showRefuse.value = false
  reasonsValue.value = ''
}


const again_remit_dialog = ref(false)
const dialog_content = ref('只针对失败的用户重新发起申请，由于不可控因素，将发薪至代理微信零钱，由代理微信转账给用户')

const show_again_remit_dialog = () => {
  again_remit_dialog.value = true
}
const dialog_close = () => {
  again_remit_dialog.value = false
}
const again_remit = (e) => {
  if(e.index == 1) {
    uni.$u.throttle(() => {
      // #ifdef MP
      sheep.$platform.useProvider('wechat').subscribeMessage(['apply_notice', 'apply_result_notice','task_pay_notice']);
      // #endif
      let params = {
        ids: editid.value,
      }
      sheep.$api.project.postAgainRemit(params).then(res => {
        sheep.$helper.toast(res.msg);
        if(res.code == 1) {
          setTimeout(function () {
            stepList.value = []
            list.value =''
            dates.value = -1
            getPolicyreportView()
            sheep.$router.renewal()
          }, 1000);
        }
      })
    }, 1000);
  }
  dialog_close()
}

</script>

<style scoped lang="scss">
@import '../compentns/public.scss';

.recruit_wrap {
  .header {
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #EFEFEF;
    padding-bottom: 30rpx;
    margin-bottom: 20rpx;

    image {
      width: 104rpx;
      height: 104rpx;
      border-radius: 50%;
    }

    .header_cont {
      display: flex;
      flex-direction: column;
      margin-left: 20rpx;
    }

    .title {
      font-family: PingFangSC;
      color: $uni-text-color;
      font-weight: $uni-font-weight;
      font-size: 30rpx;
      margin-bottom: 10rpx;
    }

    .times {
      font-family: PingFangSC;
      color: #999999;
      font-weight: 500;
      font-size: $uni-font-size-sm;
    }
  }

  .detial_list {
    width: 100%;
    margin-bottom: 30rpx;
    .title {
    height: 90rpx;
    line-height: 90rpx;
    color: $uni-text-color;
    font-weight: $uni-font-weight;
    font-size: 34rpx;
    position: relative;
    // border-bottom: 1rpx solid #EFEFEF;

    &::after {
      width: 92rpx;
      height: 14rpx;
      content: '';
      position: absolute;
      bottom: 23%;
      z-index: 9;
      left: 3%;
      border-radius: 10rpx;
      background-color: rgba(0, 56, 247, 0.5);
    }
  }
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 90rpx;

      .titles {
        font-family: PingFangSC;
        color: #666666;
        font-weight: 500;
        font-size: $uni-font-size-26;
      }

      .list_right {
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: 500;
        font-size: $uni-font-size-26;
        text-align: right;

        .yellow_status {
          color: #FF8F00 !important; 
        }
        .red_status {
          color: #FF0000 !important; 
        }
        .blue_status {
          color: #0038F7 !important; 
        }
        .green_status {
          color: #17A500 !important;
        }
      }
    }

    .item_special {
      height: auto;
      flex-direction: column;
      align-items: flex-start;

      .titles {
        font-family: PingFangSC;
        color: #666666;
        font-weight: 500;
        font-size: $uni-font-size-26;
        height: 90rpx;
        line-height: 90rpx;
      }

      .item_special_cont {
        width: calc(100% - 40rpx);
        background: #F9FAFF;
        border-radius: 16rpx;
        color: $uni-text-color;
        font-weight: 500;
        font-size: $uni-font-size-26;
        padding: 20rpx;
      }
    }
  }
}

//审核流程
.auditProcess {
  border-top: 1rpx solid #EFEFEF;

  .title {
    height: 90rpx;
    line-height: 90rpx;
    color: $uni-text-color;
    font-weight: $uni-font-weight;
    font-size: 34rpx;
    position: relative;
    margin-bottom: 20rpx;

    &::after {
      width: 92rpx;
      height: 14rpx;
      content: '';
      position: absolute;
      bottom: 23%;
      z-index: 9;
      left: 3%;
      border-radius: 10rpx;
      background-color: rgba(0, 56, 247, 0.5);
    }
  }

  .status {
    display: flex;
    justify-content: space-between;
    min-height: 140rpx;
    padding-left: 20rpx;

    .status_left {
      width: 70%;
      margin-left: 20rpx;

      .name {
        color: $uni-text-color;
        font-weight: 500;
        font-size: $uni-font-size-26;

        .position {
          color: #999999;
          font-weight: 500;
          font-size: 22rpx;
          margin-left: 10rpx;
        }
      }

      .date {
        font-family: PingFangSC;
        color: #999999;
        font-weight: 500;
        font-size: $uni-font-size-sm;
        margin-top: 10rpx;
      }
    }

    .status_right {
      .taster {
        border: none;
        width: 104rpx;
        height: 40rpx;
        font-family: PingFangSC;
        font-weight: 500;
        font-size: 22rpx;
        border-radius: 18rpx;
        line-height: 40rpx;
        padding: 0;

        &::after {
          border: none;
        }
      }

      .yellow {
        color: #F77704;
        background: #FEF3E6;
      }

      .green {
        color: #17A500;
        background: #EAFEE6;
      }

      .red {
        color: #FEE6E6;
        background: #FF0000;
      }
    }
  }
}

//  修改内容
.edit_button {
  height: 144rpx;
  width: 90%;
  padding: 0 5%;
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 98;
  display: flex;
  align-items: center;

  .del {
    width: 316rpx;
    height: 90rpx;
    border-radius: 50rpx;
    border: 2rpx solid $uni-color-primary;
    color: $uni-color-primary;
    font-family: PingFangSC;
    color: $uni-color-primary;
    font-weight: $uni-font-weight;
    font-size: 34rpx;
  }

  .edit {
    margin-left: 20rpx;
    width: 316rpx;
    height: 90rpx;
    border-radius: 50rpx;
    font-family: PingFangSC;
    color: #FFFFFF;
    font-weight: $uni-font-weight;
    font-size: 34rpx;
    background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
  }

  .original_order {
    margin-left: 20rpx;
    width: 350rpx;
    height: 90rpx;
    border-radius: 50rpx;
    font-family: PingFangSC;
    color: #FFFFFF;
    font-weight: $uni-font-weight;
    font-size: 34rpx;
    background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
  }
}

// 滚动
.comprehensive {
  background-color: rgba(0, 0, 0, 0);
  width: 100% !important;
  margin: 0;
}

.reasonspop {
  :deep(.u-textarea) {
    background-color: #F9FAFF;

    .u-textarea__field {
      height: 446rpx !important;
      padding: 10rpx;
    }
  }

  .reasonsTitle {
    height: 90rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFangSC;
    color: $uni-text-color;
    font-weight: $uni-font-weight;
    font-size: 40rpx;
  }

  .reasonsForRefusal {
    height: 466rpx;
    background: #F9FAFF;
  }

  .btn {
    height: 120rpx;
    background: $uni-bg-color;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .button {
      height: 90rpx;
      width: 240rpx;
      border-radius: 50rpx;

      font-weight: $uni-font-weight;
      font-size: 34rpx;
    }

    .cancel {
      border: 1px solid $uni-color-primary;
      color: $uni-color-primary
    }

    .confirm {
      color: $uni-bg-color;
      background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
    }

  }
}

.item_special_img {
  display: flex;

}

:deep(.u-album__row) {
  background-color: red !important;

  .u-album__row__wrapper {
    width: 180rpx !important;
    height: 180rpx !important;

    image {
      width: 100% !important;
      height: 100% !important;
    }
  }
}

// 发信明细
.Payroll_detail {
   width: 100%;
   height: auto;
   overflow: hidden;
  //项目详情
  .item {
    // width: 650rpx;
    .item_name {
      display: flex;
      align-items: center;
      margin-bottom: 15rpx;
      justify-content: space-between;

      .item_name_blue {
        color: $uni-color-primary;
        font-weight: 400;
        font-size: $uni-font-size-26;
      }

      .name_title {
        width: 90%;
        color: $uni-text-color;
        font-weight: 500;
        font-size: $uni-font-size-big;
      }
    }
    .add_item_pub{
      justify-content: space-between;
    }
    .add_background{
      background-color:#F9FAFF;
      border-radius: 16rpx;
      padding: 30rpx 16rpx;
      margin-top: 10rpx;
    }
    .item_pub {
      display: flex;
      align-items: center;
      height: 60rpx;
      .item_pub_right{
        color: #666666;
        font-weight: 500;
        font-size: 26rpx;
        .text{
        margin-left: 10rpx;
        .orange{
          color: #F77704;
          margin-right: 6rpx;
        }
        .gary{
          color: #333;
          margin-right: 6rpx;
        }
        .sex{
          font-size: 22rpx;
          color: #999;
          margin-left: 5rpx;
        }
      }
      }
    .item_pub_left{
      display: flex;
      align-items: center;
      color: #666666;
      font-weight: 500;
      font-size: 26rpx;
      .text{
        margin-left: 10rpx;
        .blue{
          margin-right: 6rpx;
        }
        .gary{
          color: #333;
          margin-right: 6rpx;
        }
        .sex{
          font-size: 22rpx;
          color: #999;
          margin-left: 5rpx;
        }
      }
    }
      .nowrap {
        width: 90%;
        color: #666666;
        font-weight: 400;
        font-size: $uni-font-size-26;
      }

      .gray {
        width: 90%;
        color: #666666;
        font-weight: 400;
        font-size: $uni-font-size-26;
      }

      .blue {
        font-family: PingFangSC;
        color: #0038F7;
        font-weight: 600;
        font-size: 26rpx;
        font-style: normal;
        text-decoration: none;
        text-align: left;
      }

      image {
        width: 28rpx;
        height: 28rpx;
        margin-right: 10rpx;
      }
    }
  }

  .title {
    height: 90rpx;
    line-height: 90rpx;
    color: $uni-text-color;
    font-weight: $uni-font-weight;
    font-size: 34rpx;
    position: relative;
    // border-bottom: 1rpx solid #EFEFEF;

    &::after {
      width: 92rpx;
      height: 14rpx;
      content: '';
      position: absolute;
      bottom: 23%;
      z-index: 9;
      left: 3%;
      border-radius: 10rpx;
      background-color: rgba(0, 56, 247, 0.5);
    }
  }

  .Payroll_content {
    width: 100%;
    overflow: hidden;
    .Payroll_list {
      width: calc(100% - 40rpx);
      margin: 0 auto;
      // overflow: hidden;

      .Payroll_name {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 96rpx;
        border-bottom: 1rpx solid #EFEFEF;

        .left {
          display: flex;
        }

        image {
          width: 28rpx;
          height: 28rpx;
          margin-right: 10rpx;
        }

        .titlename {
          color: #333333;
          font-weight: 500;
          font-size: 26rpx;
        }

        .right {
          color: #333333;
          font-weight: 500;
          font-size: 26rpx;
        }
      }

      .list_item {
        // height: 130rpx;
        border-bottom: 1rpx solid #efefef;
        .list_item_left {
          width: 70%;
          margin-bottom: 20rpx;

          .list_item_name {
            color: #666666;
            font-weight: 400;
            font-size: 26rpx;
            margin-bottom: 20rpx;
          }

          .list_item_time {
            color: #999999;
            font-weight: 400;
            font-size: 24rpx;
          }

        }
        


        .list_item_right {
          color: #FF6600;
          font-weight: 500;
          font-size: 26rpx;
        }
        .list_item_box {
          margin-top: 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .fail_remark {
          .memo {
            text-align: left;
            font-weight: 500;
            font-size: 26rpx;
            border-radius: 8px;
            background-color: #F9FAFF;
            padding: 30rpx;
          }
        }
      }
    }


  }
  .open {
      height: 94rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333333;
      font-weight: 400;
      font-size: 24rpx;
    }
}
:deep(.auditProcess){
  border: none !important;
}
.yellow{
    color: #FF8F00 !important; 
    font-size: 26rpx;
    text-align: right;
}
.red{
    color: #FF0000 !important; 
    font-size: 26rpx;
    text-align: right;
}
.blue{
    color: #0038F7 !important; 
    font-size: 26rpx;
    text-align: right;
}
.green {
    color: #006600 !important;
    font-size: 26rpx;
    text-align: right;
}
.pageBtn {
  position: fixed;
  bottom: 0;
  ;
  left: 0;
  width: 100%;
  height: auto;
  background: $uni-bg-color;
  z-index: 99;
  padding-bottom: 100rpx;
  padding-bottom: env(safe-area-inset-bottom) !important;
.again_remit_button {
    margin: 25rpx auto 10rpx auto;
    width: 670rpx;
    height: 90rpx;
    border-radius: 50rpx;
    color: $uni-bg-color;
    font-size: 34rpx;
    text-align: center;
    line-height: 90rpx;
    border: none;
    background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
  }
}

.placeholder {
  height: 164rpx;
}
</style>